<template>
  <div>
    <div>
      <el-row>
        <el-col :span="6">
          <el-card style="margin: 5px;">
            <div style="cursor: pointer;" @click="$router.go(-1)"><i class="el-icon-back"></i>返回</div>
            <div style="height: calc(100vh - 170px)">
              <div style="padding: 10px;text-align: center;">
                <el-avatar :size="80" :src="formData.avatar">默认</el-avatar>
                <div>
                  {{formData.name}}
                  <i class="el-icon-male" v-if="formData.gender=='男'" style="font-weight: bold;color:#409EFF"></i>
                  <i class="el-icon-female" v-if="formData.gender=='女'" style="font-weight: bold;color:#F56C6C"></i>
                </div>
              </div>

              <div style="text-align: center; margin-bottom: 50px;">
                <el-button-group>
                  <el-button icon="el-icon-shopping-cart-full" type="primary" title="报名" size="mini">报名</el-button>
                  <el-button icon="el-icon-edit" type="success" title="编辑" size="mini"
                    @click="handleEdit">编辑</el-button>
                  <el-button icon="el-icon-more" type="warning" title="更多" size="mini">更多</el-button>
                </el-button-group>
              </div>
              <div>
                <el-row style="padding-bottom: 4px;">
                  <el-col style="line-height:30px;">
                    联系电话: {{formData.mobile}} ({{formData.mobiletag}})
                  </el-col>
                  <el-col style="line-height:30px;">
                    出生年月:{{formData.birth}}
                  </el-col>
                  <el-col style="line-height:30px;">
                    学生来源: {{formData.source}}
                  </el-col>
                  <el-col style="line-height:30px;">
                    备用电话: {{formData.mobile2}} <span v-if="formData.mobile2!=''">({{formData.mobile2tag}})</span>
                  </el-col>
                  <el-col style="line-height:30px;">
                    就读学校: {{formData.school}}
                  </el-col>
                  <el-col style="line-height:30px;">
                    推 荐 人:{{formData.recommander}}
                  </el-col>
                  <el-col style="line-height:30px;">
                    家庭住址: {{formData.address}}
                  </el-col>
                  <el-col style="height: 60px;">
                    备 注: {{formData.memo}}
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-card style="margin: 5px;height: calc(100vh - 130px)">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="报读课程" name="buycourse">
                <div style="padding: 5px 0;">
                  <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddCourse">报名课程</el-button>
                </div>

                <div style="border: 1px solid #EaEaEa;" v-for="(item,index) in courseList" :key="index">
                  <div style="display: flex;">
                    <div style="flex:1; line-height: 35px;  padding: 5px;">
                      <span
                        style="color:#18a4df;border:1px solid #409EFF;padding: 4px 8px; border-radius: 5px;">一对多</span>
                      <span style="font-size: 12px; font-weight: ; ">{{item.courseTitle}}</span>
                    </div>
                    <div style="line-height: 35px; padding: 5px;">
                        <el-button-group>
                          <el-button type="primary" >续费</el-button>
                          <el-button type="danger">停课</el-button>
                        </el-button-group>
                    </div>
                  </div>
                  <div style="padding: 10px;">
                    <el-row>
                      <el-col :span="8">
                        所在班级: 舞蹈毕业珏
                      </el-col>
                      <el-col :span="8">
                        剩余课时: 10课时
                      </el-col>
                    </el-row>
                  </div>
                  <div>

                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="学员课表" name="timetable">学员课表</el-tab-pane>
              <el-tab-pane label="订单记录" name="orders">订单记录</el-tab-pane>
              <el-tab-pane label="课消记录" name="fourth">课消记录</el-tab-pane>
            </el-tabs>
          </el-card>

          <div style="display: flex;">
            <div style="flex: 1px;">
              <el-row>
                <el-col></el-col>
              </el-row>
            </div>

          </div>
        </el-col>
      </el-row>
    </div>
    <EditUI v-if="editVisible" ref="editUI" @complete="handleEditCallback"></EditUI>
    <AddCourseUI v-if="addCourseVisible" ref="addcourseUI"></AddCourseUI>
  </div>
</template>

<script>
  import AddCourseUI from './addcourse.vue';
  import EditUI from './edit.vue';
  import QRCode from 'qrcode';
  export default {
    components: {
      EditUI,
      AddCourseUI
    },
    data() {
      return {
        editVisible: false,
        addCourseVisible:false,
        qrcode: '123123',
        formData: {
          avatar: 'https://img.alicdn.com/sns_logo/i2/O1CN01xNDxGE1n1KV3TBHdg_!!0-wwavatar.jpg',
          stuid: ''
        },
        courseList: [{
          courseTitle: "武术基础"
        }],
        activeName: 'buycourse',
        stuid: '',
      }
    },
    mounted() {
      this.formData.stuid = this.$route.query.stuid;
      console.log(this.$route.query);
      this.loadDataList();
    },
    created() {
      this.formData.stuid = this.$route.query.stuid;
    },
    methods: {
      handleEdit() {
        this.editVisible = true;
        this.$nextTick(() => {
          this.$refs.editUI.dialogVisible = true;
          this.$refs.editUI.init(-1, JSON.parse(JSON.stringify(this.formData)))
        })
      },
      handleAddCourse(){
          this.$router.push({path:'/admin/educational/student/addcourse',query:this.formData})
      },
      handleEditCallback(index, data) {
        this.formData.title = data.title;
        this.formData.mobile = data.mobile;
        this.formData.address = data.address;
        this.formData.manager = data.manager;
        this.formData.memo = data.memo;
        this.formData.school = data.school;
        this.formData.mobile2 = data.mobile2;
        this.formData.gender=data.gender;
        this.formData.mobile2tag = data.mobile2tag;
      },
      handleClick(tab, event) {
        this.activeName = tab.name;
        console.log(tab);
        console.log(tab.label);
      },
      loadDataList() {
        const params = {
          stuid: this.formData.stuid
        }
        this.api_helper.post("/api/admin/educational/student/detail", params).then((res) => {
          if (res.status == 200 && res.data.code == 1) {
            this.formData = res.data.info;
          }
          console.log(res);
        })
      }
    }
  }
</script>

<style>
</style>
